<template>
  <div id="echart3" class="chart-container" style="height: 80vh; width: 100%;"></div>
</template>

<script setup>
import { shallowRef, onMounted, onBeforeUnmount, watch, defineProps } from "vue";
import * as echarts from 'echarts';

const props = defineProps({
  echartData: {
    type: Object,
    required: true
  },
});

const myChart3 = shallowRef(null);

const option = {
  title: {
    text: '部门业绩折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['评分绩效', '计件绩效', '提成绩效', '特殊绩效', '兼职绩效',"Okr绩效"]
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ["1","1","1","1","1","1"]
  },
  yAxis: {
    type: 'value'
  },
  series: [
{name: '评分绩效', type: 'line', stack: '总量', data: [5,6,8,6,8,6]},
{name: '计件绩效', type: 'line', stack: '总量', data: [5,6,84,6,8,6]},
{name: '提成绩效', type: 'line', stack: '总量', data: [5,6,8,65,8,6]},
{name: '特殊绩效', type: 'line', stack: '总量', data: [55,6,8,6,86,6]},
{name: '兼职绩效', type: 'line', stack: '总量', data: [25,6,8,6,8,65]},
{name: 'Okr绩效', type: 'line', stack: '总量', data: [59,6,88,6,8,86]},
]
};

const updateChart = () => {
  if (props.echartData && props.echartData.date) {
    option.xAxis.data = props.echartData.date;
    option.series = props.echartData.data1;

    console.log('Updated options:', option);
    myChart3.value.setOption(option); // 更新图表配置
  } else {
    console.warn('Invalid echartData:', props.echartData);
  }
};

const handleResize = () => {
  if (myChart3.value) {
    myChart3.value.resize(); // 调整图表尺寸
  }
};

onMounted(() => {
  myChart3.value = echarts.init(document.getElementById('echart3'));
  updateChart(); // 初始化时更新图表
  handleResize(); // 初次调整图表尺寸

  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

watch(
  () => props.echartData,
  (newVal) => {
    if (newVal) {
      updateChart(); // 当 echartData 发生变化时更新图表
    }
  },
  { immediate: true } // 组件挂载时也触发一次
);
</script>

<style scoped>
.chart-container {
  /* 可以根据需要自定义样式 */
}
</style>
